<template>
  <div>
    
<div id="layout" class="theme-cyan">

<div class="navigation navbar justify-content-center py-xl-4 py-md-3 py-0 px-3">

<a href="/#/dashboard" title="" class="brand">
<img :src="avatar" alt="" style="width:48px;height:48px;border-radius:50%;border:1px solid #21aa93;padding:4px">

 </a>


<div class="nav flex-md-column nav-pills flex-grow-2" role="tablist" aria-orientation="vertical">
<a class="mt-xl-3 mt-md-2 nav-link light-dark-toggle" href="javascript:void(0);">
<i class="zmdi zmdi-brightness-2"></i>
<input class="light-dark-btn" type="checkbox">
</a>

  <a class="mt-xl-3 mt-md-2 nav-link d-none d-sm-block"
     href="javascript:;" @click="setChatRoom" role="tab" data-toggle="tooltip1" data-placement="top" title="聊天室"><i class="zmdi zmdi-comments"></i></a>

<a class="mt-xl-3 mt-md-2 nav-link d-none d-sm-block" v-if="account.role==2" 
href="/#/dashboard/user-list"  role="tab" data-toggle="tooltip2" data-placement="top" title="用户管理"><i class="zmdi zmdi-layers"></i></a>

<a class="mt-xl-3 mt-md-2 nav-link d-none d-sm-block" v-if="account.role==2"
   href="/#/dashboard/chatmsg-list"  role="tab" data-toggle="tooltip3" data-placement="top" title="聊天记录"><i class="zmdi zmdi-folder"></i></a>

<a class="mt-xl-3 mt-md-2 nav-link d-none d-sm-block" 
href="/#" @click="setMoment"  role="tab" data-toggle="tooltip4" data-placement="top" title="朋友圈"><i class="zmdi zmdi-collection-image"></i></a>

<a class="mt-xl-3 mt-md-2 nav-link d-none d-sm-block" 
href="/#;" @click="setProfile"  role="tab" data-toggle="tooltip5" data-placement="top" title="个人资料"><i class="zmdi zmdi-account-circle"></i></a>

<a class="mt-xl-3 mt-md-2 nav-link d-none d-sm-block" 
href="/#;" @click="setPassword"  role="tab" data-toggle="tooltip6" data-placement="top" title="密码设置"><i class="zmdi zmdi-edit"></i></a>

<a class="mt-xl-3 mt-md-2 nav-link d-none d-sm-block" 
href="/#;" @click="setAvatar"  role="tab" data-toggle="tooltip7" data-placement="top" title="头像上传"><i class="zmdi zmdi-circle"></i></a>

<a class="mt-xl-3 mt-md-2 nav-link d-none d-sm-block" 
href="/#;" @click="logout" role="tab"><i class="zmdi zmdi-close"></i></a>
</div>

<button type="submit" class="btn sidebar-toggle-btn shadow-sm"><i class="zmdi zmdi-menu"></i></button>
</div>


<div class="sidebar border-end py-xl-4 py-3 px-xl-4 px-3" style="width:310px">


<div class="tab-content">



<div class="tab-pane fade show active" id="nav-tab-chat" role="tabpanel">

<div class="d-flex justify-content-between align-items-center mb-4">
<h3 class="mb-0 text-primary">在线聊天系统</h3>
</div>


<!-- <ul class="chat-list">
<li class="header d-flex justify-content-between ps-3 pe-3 mb-1">
Nav
</li>
<li class="">
    <a  onclick="$('.submenu').hide();$(this).next('.submenu').show();" class="collapsed svg-icon" >
        <i class="zmdi zmdi-account">           
        </i>
        <span class="ml-2">用户管理</span>
        <i class="las la-angle-right mm-arrow-right arrow-active"></i>
        <i class="las la-angle-down mm-arrow-right arrow-hover"></i>
    </a>
    <ul style="display:block" class="submenu collapse" >
        <li> <router-link to="/dashboard/user-list">用户管理</router-link>  </li>
        <li> <router-link to="/dashboard/user-add">用户新增</router-link>  </li>                
    </ul>
</li>
<li class="">
   
    <router-link to="/dashboard/chatmsg-list" class="collapsed svg-icon">
        <i class="zmdi zmdi-comment">           
        </i>
        <span class="ml-2">聊天记录</span>
        <i class="las la-angle-right mm-arrow-right arrow-active"></i>
        <i class="las la-angle-down mm-arrow-right arrow-hover"></i>
    </router-link>
   
</li>

<li class="">
   
    <router-link to="/dashboard/chatfile-list" class="collapsed svg-icon">
        <i class="zmdi zmdi-file">           
        </i>
        <span class="ml-2">聊天文件</span>
        <i class="las la-angle-right mm-arrow-right arrow-active"></i>
        <i class="las la-angle-down mm-arrow-right arrow-hover"></i>
    </router-link>
   
</li>




</ul> -->


<ul class="chat-list">
<li class="header d-flex justify-content-between ps-3 pe-3 mb-1">
<span>START CHAT</span>
<div class="dropdown">

</div>
</li>

<li  v-for="(item, index) in userList" :key="index">
<div class="hover_action">

</div>
<a :href="'/#/dashboard/chat/'+item.id" class="card">
<div class="card-body">
<div class="media">
<div class="avatar me-3">
<img class="avatar rounded-circle" :src="base+item.avatar" >
</div>
<div class="media-body overflow-hidden">
<div class="d-flex align-items-center mb-1">
<h6 class="text-truncate mb-0 me-auto">

<i v-if="item.gender=='男'" class="zmdi zmdi-account text-success me-1"></i>
<i v-if="item.gender=='女'" class="zmdi zmdi-account text-danger me-1"></i>
[{{item.username}}]{{item.realname}}</h6>
</div>
<div v-if="item.online==true" class="text-truncate" style="font-size:16px">
 <i class="zmdi zmdi-circle text-success"></i>
 Online
</div>
<div v-if="item.online==false" class="text-truncate" style="font-size:16px">
 <i class="zmdi zmdi-circle text-danger"></i>
 Offline
</div>
</div>
</div>
</div>
</a>
</li>
</ul>
</div>






</div>
</div>




<div class="main px-xl-5 px-lg-4 px-3">

<div class="chat-body" style="padding-top:15px">

	<router-view></router-view>

</div>




</div>















  </div></div>
</template>
<script>
  import { getList,logout } from '@/api/accountApi'
export default {
  name:'Layout',
  data(){
    return {
      userList:[],
      account: JSON.parse(localStorage.getItem('account')),
      avatar:'',
      base:process.env.VUE_APP_BASE_URL 
    }
  },created() {
    this.$nextTick(() => {
      console.log(this.account)
this.getList()
      this.avatar =
        process.env.VUE_APP_BASE_URL + this.account.account_info.avatar
    })
  },
  methods:{ setAvatar() {
      this.$router.push('/dashboard/avatar')
    },
     getList() {
      getList({}).then((resp) => {
        console.log(resp)
        this.userList = resp.data.data.filter(item=>item.id!=this.account.id)
      })
    },
    
      logout() {
        localStorage.removeItem('account')
        localStorage.removeItem('token')
        this.$router.go(0)
        location.reload()
        logout({uid:this.account.id}).then(()=>{})
      },  
    setProfile() {
      this.$router.push('/dashboard/profile')
    },
    setPassword() {
      this.$router.push('/dashboard/password')
    },
    goTo(to) {
      this.$router.push(to)
    },
    setChatRoom(){
       this.$router.push('/dashboard/chatroom')
    },
    setMoment() {
      this.$router.push('/dashboard/moment')
    },
    },
    beforeDestroy(){
       this.removeFile('admin/static/chat/fonts/material-icon/css/material-design-iconic-font.min.css','css');
this.removeFile('admin/static/chat/assets/vendor/bootstrap-datepicker/css/bootstrap-datepicker.min.css','css');
this.removeFile('admin/static/chat/assets/css/style.min.css','css');
this.removeFile( 'admin/static/chat/assets/vendor/jquery/jquery-3.5.1.min.js','js');
this.removeFile( 'admin/static/chat/assets/vendor/bootstrap/js/bootstrap.bundle.min.js','js');
this.removeFile( 'admin/static/chat/assets/vendor/bootstrap-datepicker/js/bootstrap-datepicker.min.js','js');
this.removeFile( 'admin/static/chat/js/template.js','js');

    },
    mounted(){

      this.loadFile('admin/static/chat/fonts/material-icon/css/material-design-iconic-font.min.css','css');
this.loadFile('admin/static/chat/assets/vendor/bootstrap-datepicker/css/bootstrap-datepicker.min.css','css');
this.loadFile('admin/static/chat/assets/css/style.min.css','css');
this.loadFile( 'admin/static/chat/assets/vendor/jquery/jquery-3.5.1.min.js','js');
this.loadFile( 'admin/static/chat/assets/vendor/bootstrap/js/bootstrap.bundle.min.js','js');
this.loadFile( 'admin/static/chat/assets/vendor/bootstrap-datepicker/js/bootstrap-datepicker.min.js','js');
this.loadFile( 'admin/static/chat/js/template.js','js');

    }
}
</script>
<style  scoped>
  .chat-list .submenu{padding: 15px 35px;}
    .chat-list a{color:#21aa93!important;font-size: 25px;}
.chat-list .submenu a{font-size: 18px;}
.chat-list a i{display: inline-block;padding-right: 12px;}
</style>